<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login -Shell Manage System</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        html, body {
            height: 100%;
        }

        body {
            background: url("/static/images/bg1.jpg");
            -webkit-background-size: cover;
            background-size: cover;
        }

        .window {
            display: block;
            width: 500px;
            padding: 40px 60px 40px 20px;
            z-index: 2000;
            background: rgba(255, 255, 255, .2);
            color: #fff;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .right {
            float: right;
        }

        .right:after {
            display: block;
            content: '';
            clear: both;
        }

        .layui-form-label {
            font-weight: 500;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="window">
    <form class="layui-form" onkeydown="if(event.keyCode==13)return false;">
        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="padding: 0;">User Login</legend>
            </fieldset>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Username</label>
            <div class="layui-input-block">
                <input type="text" name="username" id="user" required lay-verify="required" placeholder="Your name"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Password</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="pwd" required lay-verify="required"
                       placeholder="Your password"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div style="text-align: center">
                <input type="submit" class="layui-btn right layui-bg-black" lay-submit lay-filter="sub" value="Sign in"/>
            </div>
        </div>
    </form>
</div>
</body>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['form', 'jquery', 'layer'], function () {
        let [form, $, layer] = [layui.form, layui.jquery, layui.layer];

        //表单失焦获取表单值
        $('#user').blur(function () {
            user = $(this).val();
        });
        //表单失焦获取表单值
        $('#pwd').blur(function () {
            pwd = $(this).val();
        });
        //submit请求
        form.on('submit(sub)', function () {
            $.ajax({
                url: '/index/login/doLogin',
                type: 'post',
                dataType: 'json',
                data: {
                    username: user,
                    password: pwd
                },
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg('Sign in successfully!');
                        let timer = setTimeout(function () {
                            window.location.href = '/';
                        },1400);
                    } else {
                        layer.msg('Username or Password is error!');
                        $('#user').val(user);
                        $('#pwd').val('');
                    }
                },
                error: function (res) {
                    console.log(res);
                    layer.msg('Error: Yeshisan spilled coffee on the server...');
                }
            });
            return false;
        });
    })
</script>
</html>